<template>
  <div class="home">
    <!-- 轮播图 -->
    <div>
      <VueSwiper></VueSwiper>
    </div>
    <!-- 商品栏 -->
    <div>
      <div class="goodsList">
        <a href="javascript:void(null)" class="goods_item" v-for='(item, index) in goodsList' :key='index'>
          <div class="pic">
            <img :src="item.src" alt="">
          </div>
          <span>{{item.title}}</span>
        </a>
      </div>
    </div>
    <!-- tab栏 -->
    <div class="tab_bar">
      <!-- tab栏 -->
      <TabBar></TabBar>
    </div>
  </div>
</template>
<script>
import VueSwiper from '@/components/Swiper'
import TabBar from '@/components/Tab_bar'
// import { getCategoryList } from '@/api/home.js'
export default {
  components: {
    VueSwiper,
    TabBar
  },
  data () {
    return {
      goodsList: [] // 商品分类
    }
  },
  created () {
    this.$api.getCategoryList().then(res => {
      let response = res.data
      if (response.code === 200) {
        this.goodsList = response.goodsList
      }
    })
  }
}
</script>
<style lang='less' scoped>
.home {
  .goodsList {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    text-align: center;
    padding: 10px 0px;
    color: rgb(102,102,102);
    background-color: #fff;
    .goods_item {
      width: 20%;
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
      -ms-flex-direction: column;
      flex-direction: column;
      display: block;
      align-items: center;
      justify-content: center;
      position: relative;
      display: flex;
      margin-bottom: 5px;
    }
    .pic{
      width: 50px;
      height: 50px;
    }
    img{
      width: 100%;
      height: 100%;
      display: block;
    }
  }
  .tab_bar {
    margin-top: 5px;
  }
}
</style>
